<template>
  <div class="certification-page">
    <el-card>
      <h3>认证信息</h3>
      <el-table :data="certifications" border style="width: 100%">
        <!-- 认证类型列 -->
        <el-table-column prop="type" label="认证类型" width="150"></el-table-column>
        <!-- 描述列 -->
        <el-table-column prop="description" label="描述"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="text"
              @click="handleAction(scope.row)"
              v-if="!scope.row.isVerified"
            >
              立即认证
            </el-button>
            <el-button type="text" disabled v-else>
              已认证
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 认证弹窗 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="40%"
    >
      <!-- 动态表单渲染 -->
      <template v-if="currentType === '实名认证'">
        <el-form ref="realNameForm" :model="realNameForm" :rules="realNameRules" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="realNameForm.name" placeholder="请输入真实姓名" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="realNameForm.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="证件号" prop="idNumber">
            <el-input v-model="realNameForm.idNumber" placeholder="请输入身份证号" />
          </el-form-item>
          <el-form-item label="证件上传" prop="file">
            <el-upload
              drag
              action=""
              :auto-upload="false"
              :before-upload="handleRealNameFileUpload"
            >
              <i class="el-icon-upload"></i>
              <div>点击或拖拽上传图片</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="certification-instructions">
          <h4>认证须知：</h4>
          <p>1.你需要准备有效的学生证/教师证正面（人像面）的证件照照片，请确保证件照片清晰可见，严禁PS；</p>
          <p>2.我们将在你提交认证信息后的24小时（不包含节假日）内完成审核，审核结果将会以系统消息的形式发送给你；</p>
          <p>3.实名认证审核完成后，无法删除，请谨慎填写；</p>
          <p>4.我们会确保你所提供的信息均处于严格的保密状态，不会泄露。</p>
        </div>
      </template>

      <template v-else-if="currentType === '职业认证'">
        <el-form ref="professionalForm" :model="professionalForm" :rules="professionalRules" label-width="100px">
          <el-form-item label="职业" prop="job">
            <el-select v-model="professionalForm.job" placeholder="请选择职业" @change="handleJobChange">
              <el-option label="教师" value="教师"></el-option>
              <el-option label="学生" value="学生"></el-option>
            </el-select>
          </el-form-item>
          <template v-if="professionalForm.job === '教师'">
            <el-form-item label="职称" prop="title">
              <el-select v-model="professionalForm.title" placeholder="请选择职称">
                <el-option label="教授" value="教授"></el-option>
                <el-option label="副教授" value="副教授"></el-option>
                <el-option label="讲师" value="讲师"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="professionalForm.job === '学生'">
            <el-form-item label="学号" prop="studentNumber">
              <el-input v-model="professionalForm.studentNumber" placeholder="请输入学号" />
            </el-form-item>
            <el-form-item label="专业" prop="major">
              <el-input v-model="professionalForm.major" placeholder="请输入专业" />
            </el-form-item>
          </template>
          <el-form-item label="学校/单位" prop="organization">
            <el-input v-model="professionalForm.organization" placeholder="请输入学校或单位" />
          </el-form-item>
          <el-form-item label="院系/部门" prop="department">
            <el-input v-model="professionalForm.department" placeholder="请输入院系或部门" />
          </el-form-item>
          <el-form-item label="职业证上传" prop="file">
            <el-upload
              drag
              action=""
              :auto-upload="false"
              :before-upload="handleProfessionalFileUpload"
            >
              <i class="el-icon-upload"></i>
              <div>点击或拖拽上传图片</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="certification-instructions">
          <h4>认证须知：</h4>
          <ol>
            <li>根据职业上传对应的证明文件：教师（教师证）、学生（学生证）；</li>
            <li>确保上传的文件清晰可见，支持 png/jpg 格式；</li>
            <li>我们将在您提交职业认证信息后的24小时（不包含节假日）内完成审核；</li>
            <li>职业认证审核通过后无法修改，请谨慎填写；</li>
          </ol>
        </div>
      </template>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CertificationPage",
  data() {
    return {
      certifications: [
        { type: "实名认证", description: "实名认证可以增强你的平台信任度，还可以获得奖励~", isVerified: false },
        { type: "职业认证", description: "职业认证可查看实训资料和隐藏内容，快来完成认证吧~", isVerified: false },
      ],
      dialogVisible: false,
      dialogTitle: "",
      currentType: "", // 当前认证类型
      // 实名认证表单
      realNameForm: { name: "", gender: "", idNumber: "", file: null },
      realNameRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        idNumber: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
        file: [{ required: true, message: "请上传证件", trigger: "change" }],
      },
      // 职业认证表单
      professionalForm: { job: "", title: "", studentNumber: "", major: "", organization: "", department: "", file: null },
      professionalRules: {
        job: [{ required: true, message: "请选择职业", trigger: "change" }],
        organization: [{ required: true, message: "请输入学校或单位", trigger: "blur" }],
        department: [{ required: true, message: "请输入院系或部门", trigger: "blur" }],
        file: [{ required: true, message: "请上传职业证", trigger: "change" }],
      },
    };
  },
  methods: {
    handleAction(row) {
      this.currentType = row.type;
      this.dialogTitle = row.type;
      this.dialogVisible = true;
    },
    handleRealNameFileUpload(file) {
      this.realNameForm.file = file;
      return false;
    },
    handleProfessionalFileUpload(file) {
      this.professionalForm.file = file;
      return false;
    },
    handleJobChange(value) {
      if (value === "教师") {
        this.professionalForm.studentNumber = "";
        this.professionalForm.major = "";
      } else if (value === "学生") {
        this.professionalForm.title = "";
      }
    },
    submitForm() {
      if (this.currentType === "实名认证") {
        this.$refs.realNameForm.validate((valid) => {
          if (valid) {
            this.dialogVisible = false;
            this.certifications[0].isVerified = true;
            this.$message.success("实名认证提交成功！");
          }
        });
      } else if (this.currentType === "职业认证") {
        this.$refs.professionalForm.validate((valid) => {
          if (valid) {
            this.dialogVisible = false;
            this.certifications[1].isVerified = true;
            this.$message.success("职业认证提交成功！");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.certification-page {
  padding: 20px;
}

.certification-instructions {
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.certification-instructions h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.certification-instructions ol {
  padding-left: 20px;
  list-style: decimal;
}

.certification-instructions li {
  line-height: 1.8;
}
</style>
